<template>
  <section class="component add-telephone">
    <el-form
      :model="model"
      :rules="rules"
      label-width="100px"
      inline
      ref="model"
    >
      <el-form-item label="与客户关系" prop="relation">
        <el-select clearable placeholder="请选择" v-model="model.relation">
          <el-option
            :key="index"
            :label="name"
            :value="code"
            v-for="{ index, name, code } in $dict.getDictData('Relationship')"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="contName">
        <el-input v-model="model.contName" :maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="电话类型" prop="phoneType">
        <el-select clearable placeholder="请选择" v-model="model.phoneType">
          <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('PhoneType')"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="输入电话" prop="phone">
        <el-input v-model="model.phone" :maxlength="11"></el-input>
      </el-form-item>
      <!-- <el-form-item label="电话等级" prop="phoneRank">
        <el-select clearable placeholder="请选择" v-model="model.phoneRank">
          <el-option v-for="(item, index) in phoneRankData" :key="index" :value="item" :label="item"></el-option>
        </el-select> 
      </el-form-item> -->
    </el-form>

    <div class="confirm-button">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="onClickCommit">确认</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");
import { State, namespace } from "vuex-class";

@Component({
  components: {}
})
export default class AddTelephone extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId: string;

  private model: any = {
    phone: "",
    relation: "",
    contName: "",
    phoneType: "",
    phoneRank: ""
  };
  private rules: any = {
    phone: [
      { required: true, message: "请输入联系电话" },
      { validator: this.$validator.phoneNumber, trigger: "blur" }
    ],
    relation: { required: true, message: "请选择与客户的关系" },
    contName: { required: true, message: "请输入姓名" },
    phoneType: { required: true, message: "请选择电话类型" },
    phoneRank: { required: true, message: "请选择电话等级" }
  };
  private phoneRankData: any = []

  @Emit("close") private emitClose() {}

  private mounted() {
    this.changePhone()
  }

  private changePhone() {
    // /api/caseOperatorPageController/getPhoneRankList
    this.caseOperatorPageService.getPhoneRankList().subscribe((res) => {
      this.phoneRankData = res
    });
  }

  /**
   * 提交
   */
  private onClickCommit() {
    const form: any = this.$refs.model;
    form.validate(valid => {
      if (!valid) return;
      this.caseOperatorPageService
        .addPersonalContact({ caseId: this.caseId, ...this.model })
        .subscribe(() => {
          this.emitClose();
        });
    });
  }
}
</script>
